<template>
	<view class="container">
		<!-- 轮播图 -->
		<swiper indicator-dots autoplay indicator-active-color="#2f8ef9"  class="swiper">
		  <swiper-item v-for="(item, index) in bannerList" :key="index">
			  <image :src="item.url"></image>
		  </swiper-item>
		</swiper>
		<!-- 新闻列表 -->
		<view class="newslist">
			<view class="newsitem" v-for="(item, index) in newsList" @click="newsShow(item.uuid)">
				<image :src="imgUrl+item.coverImage" mode=""></image>
				<view class="newsName">
					{{item.title}}
				</view>
				<view class="newstime">
					{{item.releaseTime}}
				</view>
			</view>
			<view class="clear"></view>
		</view>
	</view>
</template>

<script>
	import { newsList } from '@/api/news.js'
	import nullVue from '@/components/null';
	import config from '@/config'
	
	export default {
		components:{
			nullVue
		},
		data() {
			return {
				imgUrl:config.baseUrl,
				bannerList:[],
				newsList:[]
			}
		},
		onLoad() {
			this.getNews()
		},
		methods: {
			// 查询安全防范列表数据
			getNews() {
				let data = {
					"":""
				}
				newsList(data).then((res) => {
					if(res.code==200){
						this.newsList = res.rows
						// 遍历banner数据
						for (let i = 0; i < res.total; i++) {
							let temp = {
							  url: this.imgUrl+res.rows[i].coverImage,
							};
							this.bannerList.push(temp);
						} 
					}
				  })
			},
			
			newsShow(uuid){
				uni.navigateTo({
					url: '../news/show?uuid='+uuid,
				});
			}
		}
	}
</script>

<style>
	
	.swiper{
		width: 100%;
		height: 365rpx;
	}
	
	.swiper image{
		width: 100%;
		height:100%
	}
	
	.newslist{
		margin-top: 20rpx;
		padding: 0 10rpx;
	}
	
	.newsitem{
		width: 47.2%;
		float: left;
		margin: 10rpx;
		box-shadow: 1px 1px 10rpx #ddd;
	}
	
	.newsitem image{
		width: 100%;
		height: 300rpx;
	}
	
	.newsName{
		font-size: 24rpx;
		overflow: hidden;
		display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
		-webkit-line-clamp: 2; /* 行数，值可以改，表示展示X行后多余的缩略展示 */
		-webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
		word-break: break-all;
		line-height:40rpx;
		height: 80rpx;
		padding: 0 10rpx;
	}
	
	.newstime{
		font-size: 22rpx;
		color: #b9b9b9;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		padding: 0 10rpx;
	}
	
	.clear{
		clear: both;
	}
</style>